<template>
	<view class="bacx" v-if="flag">
	</view>
	<view class="wrapper" v-else>
		<image src="../../static/bizhan/logo.png" mode="aspectFill" class="logo"></image>
<!-- 		<view class="tCenter cfff logoTitle f36">
			SNK
		</view> -->
		<view class="input_box center">
			<image src="../../static/start/account.png" mode="aspectFill" class="other"></image>
			<input type="text" style="color: #fff;" placeholder="请输入手机号" placeholder-class="c999 f26" class="flex" v-model="telephone" />
		</view>
		<view class="input_box center">
			<image src="../../static/start/pwd.png" mode="aspectFill" class="other"></image>
			<input type="password" style="color: #fff;" placeholder="设置密码" placeholder-class="c999 f26" class="flex" v-model="password" />
			<!-- <image src="../../static/start/open_eye.png" mode="aspectFill"  class="other"></image> -->
		</view>
		<view class="input_box center">
			<image src="../../static/start/img_code.png" mode="aspectFill" class="other"></image>
			<input type="text" style="color: #fff;" placeholder="图形码" placeholder-class="c999 f26" class="flex" v-model="imgCode" />
			<image :src="imgCodeUrl" v-if="telephone.length > 10" mode="aspectFit" class="imgcode" @tap="imgCodeReset"></image>
		</view>
		<view class="input_box center">
			<image src="../../static/start/code.png" mode="aspectFill" class="other"></image>
			<input style="color: #fff;" type="text" placeholder="请输入验证码" placeholder-class="c999 f26" class="flex" v-model="code01" />
			<view class="send_sms cfff f26 center " @tap="sendcode">{{ time >= 60 ? '发送' : time }}</view>
		</view>
		<view class="input_box center" v-if="inviteUserId">
			<image src="../../static/start/account.png" mode="aspectFill" class="other"></image>
			<input style="color: #fff;" type="text" placeholder-class="c999 f26" class="flex" :value="inviteUserId | fid" disabled="" />
		</view>
		<view class="btn  cfff center" @tap="register">注册</view>
		<!-- #ifdef H5 -->
		<view class="tRight ctheme down" @tap="open">已注册，直接下载</view>
		<!-- #endif -->
	</view>
</template>

<script>
import { baseUrl } from '../../common/config.js';
import md5 from '../../common/md5.min.js';
export default {
	data() {
		return {
			telephone: '', //手机号
			ajaxcode: '', //后台拿到的验证码
			code01: '', //验证码1234
			time: 60, //倒计时时间
			imgCodeUrl: '',
			imgCode: '',
			password: '',
			inviteUserId: '',
			flag:false
		};
	},
	onShow() {},
	onLoad(e) {
		if (e.inviteUserId) {
			this.inviteUserId = e.inviteUserId
		}
	},
	watch: {
		telephone() {
			if (!/^1[23456789]\d{9}$/.test(this.telephone)) {
				return false;
			}
			this.imgCodeUrl = baseUrl + this.apiList.getImgCode + '?telephone=86' + this.telephone;
		}
	},
	methods: {
		open(){
			let ua = window.navigator.userAgent.toLowerCase()
			if ( ua.match(/MicroMessenger/i) == 'micromessenger' ){
			this.flag = true
			}else {
				window.location.href='https://sapp.dierna.com/Bfmm'
			this.flag = false
			}
			
		},
		// 刷新code
		imgCodeReset() {
			uni.showLoading({
				title: '验证码加载中'
			});
			setTimeout(()=> {
				this.imgCodeUrl = baseUrl + this.apiList.getImgCode + '?telephone=86' + this.telephone +Math.random()
				uni.hideLoading();
			}, 100);
		},
		register() {
			let that = this;
			if (that.password == '') {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});

				return false;
			}
			if (that.ajaxcode == '') {
				uni.showToast({
					title: '请输入短信验证码',
					icon: 'none'
				});

				return false;
			}
			if (that.ajaxcode != this.code01) {
				uni.showToast({
					title: '短信验证码不正确',
					icon: 'none'
				});

				return false;
			}
			this.$ajax(this.apiList.register, {
				telephone: this.telephone,
				password: md5(this.password),
				nickname: '新用户',
				userType: 0,
				inviteUserId:this.inviteUserId 
			}).then(res => {
				// this.$sToast('注册成功');
				// this.$back(1, 1500);
				console.log(res)
				this.open()
			});
		},
		// 倒计时
		setinter() {
			var that = this;
			if (this.time > 0 && this.time <= 60) {
				this.time--;
				setTimeout(function() {
					that.setinter();
				}, 1000);
			} else {
				this.time = 60;
			}
		},
		// 发送验证码
		sendcode() {
			var that = this;
			console.log(this.imgCode)
			if (this.time < 60) {
				uni.showToast({
					title: '操作频繁',
					icon: 'none'
				});
				return false;
			}
			if (that.imgCode == '') {
				uni.showToast({
					title: '请输入图形验证码',
					icon: 'none'
				});
				return false;
			}
			if (!/^1[23456789]\d{9}$/.test(that.telephone)) {
				uni.showToast({
					title: '手机号格式错误',
					icon: 'none'
				});
				return false;
			}
			this.$ajax(this.apiList.sendSms, {
				telephone: this.telephone,
				imgCode: that.imgCode
				
			}).then(res => {
				this.ajaxcode = res.data.code;
				this.setinter();
			});
		}
	},
	filters:{
		fid(value){
			if(value.indexOf('BIMid_')!=-1){
				return value.split('_')[1]
			}else{
				return value
			}
		}
	}
};
</script>

<style lang="scss">
	page {
		background-color: #0E1B45;
	
	}
	.bacx {
		background: url(../../static/start/s73.png) no-repeat;
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
	}
.wrapper {
	padding: 0 50rpx;
	.down {
		padding-top: 30rpx;
		display: block;
		text-decoration: none;
	}
	.sms {
		position: fixed;
		bottom: 130rpx;
		left: calc(50% - 39rpx);
		width: 76rpx;
		height: 76rpx;
	}
	.btn {
		width: 470rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 110rpx auto 0;
		background: #00B34D;
	}
	.input_box {
		border-bottom: 1rpx solid #e0e0e0;
		margin-top: 49rpx;
		padding-bottom: 22rpx;
		padding-left: 13rpx;
		.send_sms {
			width: 150rpx;
			height: 58rpx;
			border-radius: 29rpx;
			background: #00B34D;
		}
		.other {
			width: 30rpx;
			height: 30rpx;
			margin-right: 48rpx;
		}
		.imgcode {
			width: 130rpx;
			height: 60rpx;
			margin-right: 48rpx;
		}
	}
	.logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
		margin: 32rpx auto;
		display: block;
	}
	.logoTitle{
		font-weight: bold;
		margin-bottom: 100rpx;
	}
}
</style>
